﻿﻿<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
		<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css" />
		<title>用户管理</title>

		<!-- 引入jquery -->
		<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
		<link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.min.css">
		<!-- 引入 angular 文件 -->
		<script type="text/javascript" src="plugins/angularjs/angular.min.js"></script>
		<!-- 分页组件结束 -->
		<!-- 引入 angularjs 分页组件 和 样式 -->
		<link rel="stylesheet" href="plugins/angularjs/pagination.css">
		
<title>Insert title here</title>
<script type="text/javascript" src="lib/echarts/3.4.0/echarts.min.js"></script>
		<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>

</head>
<body>
<div class="text-c">
				
				<span class="select-box inline">
				<select name="cateSelect"  class="select" id="cateSelect" >
					<option value="">全部类型</option>
					<option value="0" >收入</option>
					<option value="1" >支出</option>
				</select>
			</span> 
				openId:<input type="text"  name="" id="openId" placeholder="openId" style="width:250px" class="input-text"><!-- onclick="searchArticle()" -->
				<!-- ng-click="search02($event,searchEntity.cateId,searchEntity.beginTime,searchEntity.endTime,searchEntity.title)" -->
				<span class="select-box inline">
				<select name="weekSelect"  ng-model="searchEntity.cateId" class="select" id="weekSelect" >
					<option value="">周</option>
					<option value="0" >本周</option>
					<option value="1" >上周</option>
				</select>
				</span> 
				<button name="" id=""  class="btn btn-success" type="submit"  onclick="search()"><i class="Hui-iconfont"  >&#xe665;</i> 搜用户月度echart图</button>
</div>
	<div id="main" style="width:600px;height:400px;"></div>
	<script type="text/javascript">
	 openId="";
	 typeWeek="";
	 cateId="";
	 myChart="";
	function search(){
		openId=$("#openId").val();
		cateId=$("#cateSelect option:selected").val();
		typeWeek=$("#weekSelect option:selected").val();
		 myChart=echarts.init(document.getElementById('main'));
			myChart.setOption({
				title:{
					text:'周echarts图'
				},
				tooltip:{},
				legend:{
					data:['支出']
				},
				xAxis:{
					data:[],
					  axisTick: {
			                alignWithLabel: true
			            },
			            type : 'category'
				},
				grid: {
			        left: '3%',
			        right: '4%',
			        bottom: '3%',
			        containLabel: true
			    },
				yAxis:{},
				series:[{
					name:'支出',
					type:'bar',
					data:[],
		        	barWidth: '60%'
				}]
			});
			myChart.showLoading();
			var names=[];
			var nums=[];
			
			$.ajax({
				type:"post",
				async:true,
				url:"../inex/selectEchartByWeek.do",
				 data:  {'openId':openId,
						  'typeWeek':typeWeek,
							'cateId':cateId
				 },
				dataType:"json",
				success:function(result){
					if(result){
						
						for(var i=0;i<result.length;i++){
							names.push(result[i].typeName);
							nums.push(result[i].totalNum);
						}
					
						 myChart.hideLoading();
						 myChart.setOption({
							 xAxis:{
								 data:names
							 },
							 series:[{
								 name:'销量',
								 data:nums
							 }]
						 });
						
					}
				},
				error:function(errorMsg){
					alert("图表请求数据失败");
					myChart.hideLoading();
				}
				
			})
	}
	
</script>
</body>
</html>